繼續開啟昨天的AI對話
咒語:幫我編寫Login.jsx 使用mui組件 模仿Apple官網的登入 要用tab切換註冊登入頁面 並且可以用一組假帳號登入

import React, { useState } from 'react';
import {
  AppBar,
  Box,
  Button,
  Container,
  CssBaseline,
  Paper,
  Tab,
  Tabs,
  TextField,
  Typography,
} from '@mui/material';

const Login = () => {
  const [value, setValue] = useState(0);
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  const handleLogin = () => {
    // 在這裡可以添加處理登入的邏輯，這裡使用假帳號做示例
    if (email === 'user@example.com' && password === 'password') {
      alert('登入成功');
    } else {
      alert('登入失敗，請檢查帳號和密碼');
    }
  };

  return (
    <Container component="main" maxWidth="xs">
      <CssBaseline />
      <Paper elevation={3} sx={{ padding: 4, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
        <Typography variant="h5" gutterBottom>
          {value === 0 ? '登入' : '註冊'}
        </Typography>
        <AppBar position="static" color="transparent" elevation={0} sx={{ width: '100%' }}>
          <Tabs
            value={value}
            onChange={handleChange}
            variant="fullWidth"
            indicatorColor="primary"
            textColor="primary"
            aria-label="Login or Register Tabs"
          >
            <Tab label="登入" />
            <Tab label="註冊" />
          </Tabs>
        </AppBar>
        <Box sx={{ mt: 2 }}>
          <TextField
            required
            fullWidth
            id="email"
            label="Email 地址"
            name="email"
            autoComplete="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
        </Box>
        <Box sx={{ mt: 2 }}>
          <TextField
            required
            fullWidth
            name="password"
            label="密碼"
            type="password"
            id="password"
            autoComplete="current-password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </Box>
        <Box sx={{ mt: 2 }}>
          <Button
            fullWidth
            variant="contained"
            color="primary"
            onClick={handleLogin}
          >
            {value === 0 ? '登入' : '註冊'}
          </Button>
        </Box>
      </Paper>
    </Container>
  );
};

export default Login;

登入頁面跟註冊頁面的UI就做好了 ，明天再來聊聊邏輯的部分。